<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
	<meta charset="UTF-8">
	<title>星座轮盘|新浪星座</title>

	<!--    <link href="roulette.css" rel="stylesheet" type="text/css" />-->
	<script type="text/javascript" src="JS/jquery-1.4.1.min.js"></script>
	<script>
		try {
			document.domain = "sina.com.cn";
		} catch (e) {}
	</script>
	<script type="text/javascript">
		$(document).ready(function () {
			var canvers = document.getElementById("diagonal");
			var context = canvers.getContext("2d");
			context.globalAlpha = 0.5;

			$("#rouletteMap area").each(function () {
				$(this).mouseover(function () {

					context.beginPath();
					var strs = new Array(); //定义一数组
					strs = $(this).attr("coords").split(",");
					var i1, i2;
					for (var i = 0; i < strs.length; i++) {
						if (i % 2 == 0) {
							i1 = strs[i];
						}
						if (i % 2 == 1) {
							i2 = strs[i];
							if (i == 1) {
								context.moveTo(i1, i2);
							} else {
								context.lineTo(i1, i2);
							}
						}
					}
					context.fillStyle = "#e6887e";
					context.fill();

					context.closePath(); //闭合
				});
				$(this).mouseout(function () {
					context.clearRect(0, 0, 500, 500);
				});
			});
		});
	</script>
</head>

<body>
	<div class="main_wrapper">
		<div class="roulette">

			<div class="roulette_type">
				<ul>
					<li data-index="0"><a href="javascript:;">每日</a></li>
					<li data-index="1"><a href="javascript:;">明日</a></li>
					<li data-index="2"><a href="javascript:;">每周</a></li>
					<li data-index="3"><a href="javascript:;">每月</a></li>
					<li data-index="4"><a href="javascript:;">每年</a></li>
					<li data-index="5"><a href="javascript:;">爱情</a></li>
				</ul>
			</div>


			<div id="center" style="position:relative;
                  width:500px;
				  height:500px;
				  margin:0 auto;">
				<div style=" background: url('image/0bg.jpg') repeat scroll center center transparent;  width: 500px; height: 500px;position: relative; ">
					<canvas id="diagonal" style="border:0px none;top:0px;left:0;position:absolute; padding: 0px; opacity: 0.5;" width="500px" height="500px"></canvas>
					<img src="image/0bg.jpg" width="500px" usemap="#rouletteMap" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;" />
					<map name="rouletteMap" id="rouletteMap">
						<area date-name="Aquarius" shape="poly" coords="48,132,83,87,133,48,224,206,215,214,207,224" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=10" alt='水瓶' data-index="0" target="_blank" />
						<area date-name="Capricorn" shape="poly" coords="134,48,188,24,248,17,250,199,238,201,226,205" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=9" alt='摩羯' data-index="1" target="_blank" />
						<area date-name="Sagittarius" shape="poly" coords="250,17,306,24,365,48,274,205,264,202,251,200" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=8" alt='射手' data-index="2" target="_blank" />
						<area date-name="Scorpio" shape="poly" coords="366,49,412,82,450,132,292,224,284,214,275,206" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=7" alt='天蝎' data-index="3" target="_blank" />
						<area date-name="Libra" shape="poly" coords="451,134,474,189,482,248,299,248,293,225" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=6" alt="天秤" data-index="4" target="_blank" />
						<area date-name="Virgo" shape="poly" coords="299,250,482,249,474,311,451,364,293,273" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=5" alt='处女' data-index="5" target="_blank" />
						<area date-name="leo" shape="poly" coords="451,366,413,415,367,449,274,291,285,283,292,274" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=4" alt='狮子' data-index="6" target="_blank" />
						<area date-name="Cancer" shape="poly" coords="250,298,274,293,366,450,315,472,250,482" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=3" alt='巨蟹' data-index="7" target="_blank" />
						<area date-name="Gemini" shape="poly" coords="134,451,189,474,248,482,249,299,226,292" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=2" alt='双子' data-index="8" target="_blank" />
						<area date-name="Taurus" shape="poly" coords="48,366,83,413,132,450,224,293,207,274" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=1" alt='金牛' data-index="9" target="_blank" />
						<area date-name="Aries" shape="poly" coords="48,366,25,311,16,250,199,250,202,263,206,274" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=0" alt='白羊' data-index="10" target="_blank" />
						<area date-name="Pisces" shape="poly" coords="48,133,25,185,17,248,200,248,202,236,206,224" href="http://mix.sina.com.cn/astro/view.php?file=&flag=1&prourl=11" alt='双鱼' data-index="11" target="_blank" />

					</map>
				</div>
				<div class="roulette_center"><a href="http://product.astro.sina.com.cn/swe" target="_blank">查看</br>星盘</a></div>
			</div>
		</div>

	</div>
</body>

</html>